<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="recording and transcoding system">
    <meta name="author" content="typefo">
    <link rel="icon" href="favicon.ico">
    <title>pbxMon System</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link type="text/css" rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css">
    <link type="text/css" rel="stylesheet" href="/css/cdr.css">
  </head>
  <body>
    <div class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">
            <img alt="Brand" src="/img/logo.png" width="34" style="margin-top:-8px" />
          </a>
          <a class="navbar-brand">pbxMon</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="/cdr">通话记录</a></li>
            <li><a href="/server">网关管理</a></li>
            <li><a href="/route">路由管理</a></li>
            <li><a href="/interface">接口管理</a></li>
            <li><a href="/report">数据报表</a></li>
            <li><a href="/system/status">服务器状态</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/system/option"><span class="glyphicon glyphicon-cog"></span> 系统设置</a></li>
            <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span> 退 出</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <ol class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Cdr</a></li>
          <li class="active">Data</li>
          <li class="pull-right help"><span class="glyphicon glyphicon-question-sign"></span> <a href="#">帮助信息</a></li>
        </ol>
      </div>
    </div>
    <div class="container main">
      <div class="row query" style="min-width: 1000px">
        <form class="form-inline" action="/cdr" method="get">
          <div class="form-group">
            <label>通话时间: </label>
	        <?php
          echo '<input type="text" id="begin" class="form-control input-sm begin" name="begin" value="',isset($where['begin']) ? $where['begin'] : date('Y-m-d 08:00:00'),'" />';
	        ?>
          </div>
          -
          <div class="form-group">
	        <?php
	        echo '<input type="text" id="end" class="form-control input-sm end" name="end" value="',isset($where['end']) ? $where['end'] : date('Y-m-d 20:00:00'),'" />';
	        ?>
          </div>
          <div class="form-group">
            <label>
              <select id="type" name="type">
              <?php
                echo '<option value="1"',(isset($where['type']) && $where['type'] == 1) ? ' selected="selected"' : '','>主叫号码</option>';
                echo '<option value="2"',(isset($where['type']) && $where['type'] == 2) ? ' selected="selected"' : '','>被叫号码</option>';
              ?>
              </select>
            </label>
	        <?php
	        echo '<input type="text" id="number" class="form-control input-sm number" placeholder="请输入号码" name="number" value="',isset($where['number']) ? $where['number'] : '','" />';
	        ?>
          </div>
          <div class="form-group">
            <label>
              <select id="calss" name="class">
              <?php
                echo '<option value="1"',(isset($where['class']) && $where['class'] == 1) ? ' selected="selected"' : '','>呼入 IP</option>';
                echo '<option value="2"',(isset($where['class']) && $where['class'] == 2) ? ' selected="selected"' : '','>呼出 IP</option>';
              ?>
              </select>
            </label>
	        <?php
	        echo '<input type="text" id="called" class="form-control input-sm ip" placeholder="请输入ip地址" name="ip" value="',isset($where['ip']) ? $where['ip'] : '','" />';
	        ?>
          </div>
          <div class="form-group hidden-xs hidden-sm">
            <label>通话时长: </label>
	        <?php
	        echo '<input type="number" id="duration" class="form-control input-sm talktime" name="duration" min="0" value="',isset($where['duration']) ? $where['duration'] : 0,'" />';
	        ?>
          </div>
          <button type="submit" id="query" class="btn btn-success btn-sm pull-right" name="sub" value="ok">查 询</button>
        </form>
      </div>
      <div class="row">
        <table class="table table-hover table-condensed" onload="alert('hello world')">
          <thead>
            <tr><th>#</th><th>主叫号码</th><th>被叫号码</th><th>号码归属地</th><th>通话时长</th><th>呼入 IP</th><th>呼出 IP</th><th>通话时间</th><th>录音试听</th><th>二维码</th><th>下 载</th></tr>
          </thead>
          <tbody id="data">
	        <?php
	          if ($data) {
	            foreach ($data as $obj) {
                  echo '<tr><td>',$obj['id'],'</td><td>',$obj['caller'],'</td><td>',$obj['called'],'</td><td>',$obj['location'],'</td><td>',gmstrftime('%H:%M:%S', $obj['duration']),'</td><td>',long2ip($obj['src_ip']),'</td><td>',long2ip($obj['dst_ip']),'</td><td>',$obj['create_time'],'</td><td><a href="javascript:void(0);" res="' . $obj['file'] . '" onClick="show(this)"><span class="glyphicon glyphicon-headphones"></span> 试 听</a></td><td><span class="glyphicon glyphicon-qrcode" res="',$obj['file'],'" onClick="qrcode(this)"></span></td><td><a href="/record/',$obj['file'],'">下 载</a></td></tr>',"\n";
	            }
	          }
            ?>
          </tbody>
        </table>
      </div>
      <?php
      if ($data && count($data) >= 32) {
        echo '<div id="loading">',"\n";
        echo '<nav>',"\n";
        echo '<ul class="pager">',"\n";
        echo '<li><a href="javascript:void(0);" onClick="loadMore()">点击这里，加载更多 &middot;&middot;&middot;</a></li>',"\n";
        echo '</ul>',"\n";
        echo '</nav>',"\n";
        echo '</div>',"\n";
      }
      ?>
    </div>
  </body>
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript" src="/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
  <script type="text/javascript" src="/js/layer.js"></script>
  <script type="text/javascript" src="/js/cdr.js"></script>
  <script type="text/javascript">
    // datetimepicker
    $('#begin').datetimepicker({
      format: 'yyyy-mm-dd hh:ii:ss',
      language: 'zh-CN',
      autoclose: true
    });

    $('#end').datetimepicker({
      format: 'yyyy-mm-dd hh:ii:ss',
      language: 'zh-CN',
      autoclose: true
    });

    $("#query").click(function(){
      var index = layer.load(2, {shade: [0.7,'#fff'], time: 3000});
    });

    function show(obj) {
      var file = obj.getAttribute("res");
      var html = '<div class="container-fluid">' +
                 '<div class="row text-center" style="height:75px;padding:20px">' +
                 '<audio src="/record/' + file + '" style="width:333px" preload="metadata" autoplay="autoplay" controls="controls">您的浏览器不支持录音试听</audio>' +
                 '</div>' +
                 '</div>';

      layer.open({
        type: 1,
        title: '录音试听',
        skin: 'layui-layer-demo',
        closeBtn: 1,
        shift: 0,
        shade: 0,
        area: ['420px', '120px'],
        content: html
      });
    }

    function qrcode(obj) {
        var res = obj.getAttribute("res");
        var url = 'http://' + window.location.host + '/play?file=' + res; 
        var img = 'http://qr.liantu.com/api.php?text=' + url;

        layer.open({
            type: 1,
            title: '手机扫描二维码试听',
            area: ['300px', '345px'],
            content: '<img src="' + img + '" />'
        });
    }

    <?php if (isset($last) && $last > 0) echo 'last = ',$last,";\n";?>
  </script>
</html>
